<template>
  <el-container class="c-container">
    <el-form class="c-login-container" ref="loginForm" label-position="left" label-width="0px" :model="loginForm" :rules="rules">
      <h3 class="c-title">接口管理平台</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" checked class="c-remember">记住密码</el-checkbox>
      <el-form-item class="c-form-item">
        <el-button type="primary" style="width:100%;" @click.native.prevent="login">登录</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      checked: true,
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          let params = {
            username: this.loginForm.username,
            password: this.loginForm.password
          }
          // this.$csii.ajax(api.USER_LOGIN, {
          //   params: params
          // }).then(res => {
          //   sessionStorage.setItem('user', JSON.stringify(params))
          //   this.$csii.psPageNext('/home')
          // })
          sessionStorage.setItem('user', JSON.stringify(params))
          this.$csii.psPageNext('/home')
        }
      })
    }
  },
  created () {}
}
</script>

<style scoped>
  @charset "utf-8";
  .c-login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    background: #fff;
    height: 320px;
    width: 380px;
  }
  .c-login-container .c-title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #20a0ff;
    font-size: 24px;
  }
  .c-login-container .c-remember {
    margin: 0px 0px 35px 0px;
  }
  .c-container {
    overflow: hidden;
    background: #20a0ff;
  }
  .c-form-item {
    width: 100%
  }
</style>
